<template>
<!-- 电商视频热度分析 7 40 -->
  <div id="video04">
    <template v-if="vipRootObj[7][40].owner">
      <p class="title mt_30" v-if="!loading">
        <img src="@/assets/meng/video03_01.png" /><span>商品</span>
      </p>
      <section v-for="(item, index) in table_data" :key="'table' + index">
        <div class="shop">
          <img :src="item.proLogo" @click="details(item.proId)" />
          <p @click="details(item.proId)">{{ item.proTitle }}</p>
          <section>
            <p>￥{{ item.proPrice }}</p>
            <p>售价</p>
          </section>
          <section>
            <p>{{ format_num(item.volume) }}</p>
            <p>销量</p>
          </section>
          <section>
            <button @click="details(item.proId)">查看详情</button>
            <p v-show="item.show" @click="show_list(index, false, item.proId)">
              查看趋势图 <i class="el-icon-arrow-up"></i>
            </p>
            <p v-show="!item.show" @click="show_list(index, true, item.proId)">
              查看趋势图 <i class="el-icon-arrow-down"></i>
            </p>
          </section>
        </div>
        <section v-if="item.show">
          <p class="title mt_45">
            <img src="@/assets/meng/video04_01.png" /><span
              >商品销售量趋势</span
            >
          </p>
          <my_line
            class="line01"
            :x_data="x_data01"
            :y1_data="y1_data01"
            :y2_data="y2_data01"
            name1="增量"
            name2="总量"
            formatter="1"
          />
          <p class="title mt_35">
            <img src="@/assets/meng/video04_02.png" /><span
              >商品浏览量趋势</span
            >
          </p>
          <my_line
            class="line01"
            :x_data="x_data02"
            :y1_data="y1_data02"
            :y2_data="y2_data02"
            name1="增量"
            name2="总量"
            formatter="1"
          />
          <p class="title mt_35">
            <img src="@/assets/meng/video04_03.png" /><span
              >作品点赞量趋势</span
            >
          </p>
          <my_line
            class="line01"
            :x_data="x_data03"
            :y1_data="y1_data03"
            :y2_data="y2_data03"
            name1="增量"
            name2="总量"
            formatter="1"
          />
        </section>
      </section>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <p class="no_data" v-if="!loading && table_data.length == 0">
        目前没有可以查看的数据哟~
      </p>
    </template>
    <!-- <div class="permissions_img" v-else>
      <p>以下为示例图,该功能为{{lowestRoot}}及以上会员可用,请<span @click="$router.push('/talent_main/buy')">升级会员</span>使用</p>
      <img src="@/assets/meng/l2.png" />
      <img src="@/assets/wang/talentCompare/exampleIcon.png" />
    </div> -->
    <div class="notVipBoxNewWl" v-else>
      <img src="@/assets/meng/l2.png" alt="" class="egBgImg" />
      <div class="dialog_pay_box">
        <payVip routerName="audience" :lowestVipNum="vipRootObj[7][40].ownerMinLevel" :isResize="false" />
      </div>
    </div>       
  </div>
</template>
<script>
export default {
  name: "video04",
  components: {},
  data() {
    return {
      loading: true,
      permissions: 1,
      table_data: [],
      shop_id: "",
      x_data01: [],
      y1_data01: [],
      y2_data01: [],
      x_data02: [],
      y1_data02: [],
      y2_data02: [],
      x_data03: [],
      y1_data03: [],
      y2_data03: [],
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  props: ["id","lowestRoot"],
  computed: {},
  created() {
    this.get_data();
  },
  mounted() {},
  methods: {
    details(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    show_list(index, flag, id) {
      this.shop_id = id;
      this.$set(this.table_data[index], "show", flag);
      this.get_data01(index);
    },
    get_data() {
      this.loading = true;
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/product/find",
        params: {
          awemeId: that.id,
          pageIndex: 1,
          pageSize: 99999999,
        },
      })
        .then((response) => {
          this.loading = false;
          if (response.data.code == 1003) {
            this.permissions = 0;
          }
          if (response.data.code == 0) {
            this.table_data = response.data.data.map((element) => {
              element.show = false;
              return element;
            });

            // console.log(this.table_data)
          }
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
    // 商品趋势图
    get_data01(index) {
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/product/trend",
        params: {
          proId: that.shop_id,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data01 = response.data.data[0].dataUnix.map((element) => {
              return this.timestamp(element, "M月D日 h:m");
            });
            this.y1_data01 = response.data.data[0].trendData[0];
            this.y2_data01 = response.data.data[0].trendData[1];
            this.x_data02 = response.data.data[2].dataUnix.map((element) => {
              return this.timestamp(element, "M月D日 h:m");
            });
            this.y1_data02 = response.data.data[2].trendData[0];
            this.y2_data02 = response.data.data[2].trendData[1];
            this.x_data03 = response.data.data[1].dataUnix.map((element) => {
              return this.timestamp(element, "M月D日 h:m");
            });
            this.y1_data03 = response.data.data[1].trendData[0];
            this.y2_data03 = response.data.data[1].trendData[1];
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style scoped lang='less'>
.loading {
  margin-top: 100px;
}
.no_data {
  font-size: 16px;
  text-align: center;
  color: #fd7f2c;
  line-height: 439px;
}
.line01 {
  height: 420px;
  width: 100%;
}
.shop {
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: 27px;
  > section:nth-child(5) {
    margin-left: 230px;
    i {
      font-weight: 600;
    }
    p {
      font-size: 14px;
      color: #fd7f2c;
      text-align: center;
      margin-top: 10px;
      cursor: pointer;
    }
    > button {
      width: 88px;
      height: 32px;
      background-color: #fd7f2c;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      color: #ffffff;
      line-height: 30px;
    }
  }
  > section:nth-child(3) {
    margin-right: 40px;
    margin-left: 74px;
  }
  > section:nth-child(3),
  > section:nth-child(4) {
    width: 200px;
    > p:first-child {
      font-family: DINAlternate-Bold;
      font-size: 22px;
      color: #fd7f2c;
      margin-bottom: 8px;
      white-space: nowrap;
    }
    > p:last-child {
      font-size: 14px;
      white-space: nowrap;
      color: #888888;
    }
  }
  > p:nth-child(2) {
    font-size: 16px;
    line-height: 25px;
    color: #222222;
    width: 281px;
    word-break: break-all;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
  }
  > img {
    border: 1px solid #e5e5e5;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin-right: 11px;
    box-sizing: border-box;
    cursor: pointer;
  }
}
.title {
  img {
    width: 16px;
    vertical-align: -2px;
    margin-right: 9px;
  }
  span {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
  }
}
#video04 {
  width: 100%;
}
</style>